<template>
	<div class="main">
		<div class="input">
			<input type="text" placeholder="请输入内容" v-model="txt"/>
			<button @click="find()">查询</button>
		</div>
		<Banner></Banner>
	</div>
	
</template>

<script>
	import Banner from './Banner.vue'
	export default{
		name:'Main',
		data(){
			return{
				imgurl:'',
				txt:''
			}
		},
		components:{
			Banner
		},
		methods:{
			find(){
				if(this.txt!='')
				{
					this.$router.push({
						path:'/home/detail',
						query:{
							key:this.txt
						}
					})
				}else{
					this.$router.push('/home/detail')
				}
			}
		},
		created() {
			this.axios.get('/api/public/book/findFav5').then( (res)=>{
				this.imgurl=res.data.data[0].picture
			} ).catch( (error)=>{
				
			} )
		}
	}
</script>

<style scoped>
	.main{
		margin-top: 15px;
	}
	.input{
		width: 90%;
		position: relative;
		height: 70px;
		margin: auto;
		margin-top: 55px;
		border-top: 1px solid gold;
		border-bottom: 1px solid gold;
	}
	input{
		/* #42b983 */
		width: 500px;
		border-radius: 20px;
		border: 1px solid red;
		float: right;
		outline: none;
		text-indent: 2em;
		margin-top: 15px;
		height: 40px;
	}
	button{
		position: absolute;
		margin-top: 15px;
		right: 1px;
		border: none;
		color: gold;
		font-weight: bold;
		font-size: 17px;
		top: 1px;
		background-color: #ff0000;
		border-radius: 0 16px 16px 0;
		height: 42px;
		width: 80px;
	}
</style>
